<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器02</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        /*选择到了所有的p标签，并且有cyan-bgc这样一个样式p标签*/
        p.cyan-bgc {
          font-size: 25px;
        }

        p.cyan-bgc.font2 {
            color: hotpink;
        }
        /*并集选择器，多个类或者标签有相同的样式的时候，可以通过并集选择器，为他们设置同一个样式，多个样式用，分割*/
        h2, h3 {
            font-family: 宋体;
        }
        /*后代选择器*/
        .header a {
            background-color: lightcoral;
        }
        /*选择的是直接子代，不包含孙子、重孙之类的*/
        .header > div {
            color: aqua;
        }
        .header div{
            font-size: 20px;
        }
    </style>
</head>
<body>
<h2>复合选择器</h2>
<h3>交集选择器</h3>
<p class="cyan-bgc font2">
    天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，
</p>

<p class="cyan-bgc">
    天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，
</p>

<p class="cyan-bgc">
    天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，天亮教育-尚云科技，
</p>

<p>
    这是一个特殊的p标签
</p>

<a href="">这是外面的a标签</a>

<div class="header">
    <div>logo</div>

    <div>
        天亮教育
    </div>

    <ul>
        <li><div>尚云科技</div></li>
    </ul>

    <div>
        <a href="">精品课程</a>
        <a href="">免费课程</a>
    </div>
</div>

</body>
</html>